<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    	.box { max-width: 1350px; width:100%; margin:25px auto; padding: 0 25px; position: relative; padding-left: 240px; }
    	.tabMenu{
    		position: absolute;
    		top: 0;
    		left: 25px;
    		width: 180px;
    		background-color: #fff;
    		border:1px #DFE0E4 solid;
    		border-bottom-color: #D0D1D5!important;
    		border-radius: 3px;
    	}
    	.tabMenu > ul li a:hover,
    	.tabMenu > ul li a:focus{
    		background-color:#F6F7F8;
    	}
    	.tabMenu > ul .active a,
    	.tabMenu > ul .active a:hover,
    	.tabMenu > ul .active a:focus{
    		background-color:#F6F7F8;
    	}
    	.tabMenu > ul li a{
    		text-decoration:none;
    		text-align:left;
    		display: block;
    		padding: 14px 0 14px 10px;
    		border-bottom: 1px #DBDBDB solid;
    	}
    	.tabMenu > ul li:last-child a{
    		border-bottom: 0;
    	}
    	   	
    	.tabMenu > ul li.active,
    	.tabMenu > ul li.active a,
    	.tabMenu > ul li.active a *{
    		background-color:#F6F7F8;
    	}
    	.tabMenu > ul > li i{
    		font-size: 18px;
    		color: #666;
    		margin-right: 14px;
    	}
    	.subLayout{
    		width:100%;
    	}
    	#chart{ list-style-type: none; margin:0; padding:0; width: 100%; }
    	.chart_box{
    		width: 49%;
    		padding: 0 0 15px 15px;
    		float: left;
    		height: 385px;
    		position: relative;
    	}
    	.chart_box_in{
    		border-radius: 4px;
    		border: 1px solid #ddd;
    		background-color: #fff;
    		padding: 12px 8px;
    	}
    	.chart_title{
    		padding-bottom: 10px;
    		border-bottom: 1px solid #ddd;
    		font-size: 15px;
    	}
    	.chart_move{
    		border: 2px dotted #ddd;
    		border-radius: 4px;
    	}
    	.location-chart{
    		height: 265px;
    		padding:0!important;
    		list-style: none;
    		clear: both;
    	}
    	.location-chart-header{
    		border-bottom:1px solid #efefef;font-weight:bold;height:25px;
    	}
    	.location-chart li{
    		height: 30px;
    	}
    	.location-chart li:nth-child(2n+1){
    		background-color: #F8F8F8;
    	}
    	.location-chart .location-key{ float: left; padding-left:5px; padding-top:2px; }
    	.location-chart .location-value{ float: right; padding-right:5px; padding-top:2px; }
    	#dash-location-empty{ height: 300px; text-align: center; width:100%; padding-top: 110px; display: none; }
    	
    	.post_list{ border-radius: 4px; border: 1px solid #ddd; background-color: #fff; padding: 18px 16px; margin:0 15px; }
    	.post_list_title { padding-bottom: 18px; border-bottom: 1px solid #ddd; font-size: 15px; position: relative; }
    	.post_list_search { position:absolute; right:0; top:0; border: 1px solid #ddd; }
    	.post_list_search input { border: 0; padding: 4px 0 4px 8px; font-size:13px; }
    	.post_list_search button { border: 0; background-color: #fff; height: 26px; color:#999; font-size: 14px; }
    	#post-list{ padding-left:0; list-style-type:none; margin-top:15px; max-height: 350px; overflow-y: auto; }
    	#post-list li { height: 55px; position: relative; padding: 6px 0; cursor:pointer; border-bottom: 1px solid #f5f5f5; }
    	#post-list li:hover { background-color: #f5f5f5; }
    	.post_list_image{ position:absolute;left:0;top:7px;width:40px; height:40px; border-radius:2px; }
    	.post_list_content{ padding: 0 55px; line-height:35px; }
    	.post_list_time{ position: absolute;right:15px; top:15px; color:#ddd; font-size:13px; }
    	
    	.loading{ position:absolute; top:50%; left: 50%; margin-left: -16px; margin-top: -16px; }
    	.loading-post { position:absolute; top:50%; left: 50%; margin-left: -16px; margin-top: -16px; display: none; }
    	
    	.post_stats_box { width: 49%; padding: 0 0 15px 15px; float: left; height: 385px; position: relative; }
    	.post_stats_box_in { border: 1px solid #ddd; background-color: #fff; padding: 12px 8px; }
    	
    	.active { font-weight: bold; color:#4285F4; }
    	.post_popularity_list { padding-left:0; list-style-type:none; max-height: 350px; overflow-y: auto; margin-bottom:0; }
    	.post_popularity_list a {text-decoration:none!important;display:block;}
    	.post_popularity_list li { height: 55px; position: relative; padding: 6px 0; cursor:pointer; border-bottom: 1px solid #f5f5f5; }
    	.post_popularity_list li:hover { background-color: #f5f5f5; }
    	
    	#likemember-list{ padding-left:0; list-style: none; }
		#likemember-list li{ width: 100%; position: relative; padding: 10px 0; border-bottom: 1px solid #eee; }
		#likemember-list li:hover{ background-color: #f8f8f8; }
		#likemember-list div > a > img{ width: 40px; height: 40px; border-radius: 2px; }
		#likemember-list div{ position: absolute; top: 13px; left: 0; }
		#likemember-list p{ padding-left: 55px; }
		#likemember-list button{ position: absolute; top: 15px; right:0; }
		#likemember-list .lm-name{ font-size: 15px; color: #527896; }
		#likemember-list .lm-id{ text-decoration: none; color: #8f8f8f; font-size: 13px; }
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->
<div class="box">
	<div class="tabMenu">
		<ul class="list-unstyled" id="menu" style="padding:0;margin:0;">
			<li class="active" onclick="sub(this, 'dashboard')"><a href="#dashboard" title="대시보드"><i class="ion-ios7-browsers"></i>대시보드</a></li>
			<li onclick="sub(this, 'stats')"><a href="#stats" title="게시물 통계"><i class="ion-stats-bars"></i>게시물 통계</a></li>
			<li onclick="sub(this, 'event')"><a href="#event" title="이벤트 및 광고"><i class="ion-radio-waves"></i>이벤트 &amp; 광고</a></li>
		</ul>
	</div>
	<div class="subLayout" id="dashboard">
		<div class="chart_box">
			<div class="chart_box_in" style="min-height:369px;">
				<p class="chart_title">인기게시물</p>
				<div style="position:absolute;top: 15px; right: 15px;"><span onclick="getPopularityPost(this, 'like')" style="cursor:pointer;" class="active">좋아요</span>  / <span onclick="getPopularityPost(this, 'viewcnt')" style="cursor:pointer;">조회순</span></div>
				<ul id="popularity-like-list" class="post_popularity_list"></ul>
				<ul id="popularity-viewcnt-list" class="post_popularity_list"></ul>
				<div style="text-align:center;padding:130px 0 0 0;display:none;" id="none-like-post-message">등록된 게시글이 없습니다</div>
			</div>
			<div class="loading"><img src="/resources/img/ajax-loader.gif"></div>
		</div>
		<div class="chart_box">
			<div class="chart_box_in">
				<p class="chart_title">성별 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="회원님의 상품을 본 전체 성별 카운트입니다(회원만 집계)" data-toggle="tooltip"></i></p>
				<div id="dashboard-gender-chart" style="width: 100%; height: 300px;"></div>
			</div>
			<div class="loading"><img src="/resources/img/ajax-loader.gif"></div>
		</div>
		<div class="chart_box">
			<div class="chart_box_in">
				<p class="chart_title">연령대 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="회원님의 상품을 본 전체 연령대 카운트입니다(회원만 집계)" data-toggle="tooltip"></i></p>
				<div id="dashboard-age-chart" style="width: 100%; height: 300px;"></div>
			</div>
			<div class="loading"><img src="/resources/img/ajax-loader.gif"></div>
		</div>
		<div class="chart_box">
			<div class="chart_box_in">
				<p class="chart_title">조회수 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="회원님의 프로필페이지,포스트,상품URL에 대한 전체 카운트 입니다(비회원,회원 모두집계)" data-toggle="tooltip"></i></p>				
				<div id="dashboard-viewcnt-chart" style="width: 100%; height: 300px;"></div>
			</div>
			<div class="loading"><img src="/resources/img/ajax-loader.gif"></div>
		</div>
		<div class="chart_box">
			<div class="chart_box_in">
				<p class="chart_title">위치 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="회원님의 상품을 방문한 회원의 지역과 국가입니다.(입력받지 않은 지역은 제외)" data-toggle="tooltip"></i></p>
				<c:if test="${fn:length(locationStats) ne 0}">
					<div class="location-chart-header"><span style="float:left;">지역 / 국가</span><span style="float:right;">접속자수</span></div>
					<ul class="location-chart" id="dash-location-chart">
						<c:forEach var="value" items="${locationStats}">
							<c:if test="${value.location ne '' and value.location ne null}">
								<li><span class="location-key">${value.location},&nbsp;${value.country}</span><span class="location-value">${value.cnt}</span></li>
							</c:if>
						</c:forEach>
					</ul>
				</c:if>
				<div id="dash-location-empty">데이터가 없습니다</div>
				<c:if test="${fn:length(locationStats) eq 0}">
					<div id="dash-location-empty">데이터가 없습니다</div>
				</c:if>
			</div>
			<div class="loading"><img src="/resources/img/ajax-loader.gif"></div>
		</div>
	</div>
	<div class="subLayout" id="stats" style="display: none;">
		<div class="post_list">
			<div class="post_list_title">
				<span>게시물 리스트</span><span style="font-size:13px;color:#ddd;margin-left:10px;" id="post-size"></span>
				<div class="post_list_search">
					<input type="text" placeholder="검색" id="post-search">
					<button type="button"><i class="fa fa-search"></i></button>
				</div>
			</div>
			<ul id="post-list"></ul>
			<div style="text-align:center;padding:25px 0;display:none;" id="none-post-message">등록된 게시글이 없습니다</div>
		</div>
		<div style="padding:15px;text-align:center;color:#818181;" id="post-stats-select">
			<i class="ion-arrow-up-c" style="font-size:45px;margin-bottom:20px;"></i>
			<p style="font-size:20px;">통계를 보려면 리스트에서 게시물을 선택해주세요</p>
		</div>
		<div class="post-stats" id="post-stats-list" style="margin-top: 25px;display:none;">
			<div style="padding: 15px 20px 15px 15px;"><p style="background-color:#fff;padding:6px 0 6px 10px;border-left:5px solid #bebebe;font-size:16px;"><a id="post-title" target="_blank" style="text-decoration:none;"><img id="post-image" style="width:45px;height:45px;"><span style="margin-left:15px;"></span></a></p></div>	
			<div class="chart_box">
				<div class="chart_box_in">
					<p class="chart_title">전체 카운트</p>
					<div style="height: 300px;padding-top:30px;text-align:center;">
						<div style="margin:0 auto;">
							<div style="float:left;width:33%;height:90px;text-align:center;border-right:1px solid #ddd;" title="이 상품을 본 전체 방문자 수 입니다(비회원,회원 모두)" data-toggle="tooltip"><p style="margin-top:10px;">방문자수</p><p style="font-size:28px;" id="post-cnt"></p></div>
							<div style="float:left;width:33%;height:90px;text-align:center;border-right:1px solid #ddd;" title="상품구매 링크를 클릭한 수 입니다(비회원,회원 모두)" data-toggle="tooltip"><p style="margin-top:10px;">구매링크 클릭수</p><p style="font-size:28px;" id="link-cnt"></p></div>
							<div style="float:left;width:33%;height:90px;text-align:center;"><p style="margin-top:10px;">좋아요</p><p style="font-size:28px;" id="like-cnt"></p></div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<div class="loading-post"><img src="/resources/img/ajax-loader.gif"></div>
			</div>
			<div class="chart_box">
				<div class="chart_box_in">
					<p class="chart_title">최근 일주일 조회수 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="최근 일주일간 해당상품을 본 방문자 카운트입니다(회원만 집계)" data-toggle="tooltip"></i></p>
					<div id="post-weekcnt-chart" style="width: 100%; height: 300px;"></div>
				</div>
				<div class="loading-post"><img src="/resources/img/ajax-loader.gif"></div>
			</div>
			<div class="chart_box">
				<div class="chart_box_in">
					<p class="chart_title">성별 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="해당상품을 본 성별 카운트입니다(회원만 집계)" data-toggle="tooltip"></i></p>
					<div id="post-gender-chart" style="width: 100%; height: 300px;"></div>
				</div>
				<div class="loading-post"><img src="/resources/img/ajax-loader.gif"></div>
			</div>
			<div class="chart_box">
				<div class="chart_box_in">
					<p class="chart_title">연령대 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="해당상품을 본 연령대 카운트입니다.(회원만 집계)" data-toggle="tooltip"></i></p>
					<div id="post-age-chart" style="width: 100%; height: 300px;"></div>
				</div>
				<div class="loading-post"><img src="/resources/img/ajax-loader.gif"></div>
			</div>
		</div>
	</div>
	<div class="subLayout" id="event" style="display: none;text-align:center;">
			<p><i class="ion-battery-low" style="color:#888;font-size:70px;"></i></p>
			<p style="color:#666;font-size:22px;">준비중입니다</p>
		</div>
	</div>
</div>
<div class="modal fade" id="likemember-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>좋아하는 사람들</h4>
			</div>
			<div class="modal-body">
				<div id="likemember-list-loading" style="display: none;padding: 25px 0; text-align: center;"><img src="/resources/img/loading-20x20-white.gif"></div>
				<ul id="likemember-list"></ul>
			</div>
		</div>
	</div>
</div>
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script type="text/javascript" src="/resources/js/hangul.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/resources/js/hangul.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery.slimscroll.min.js"></script>
<script type="text/javascript">
	var gender_female = parseInt("${genderStats.female}");
	var gender_male = parseInt("${genderStats.male}");
	var age_10 = parseInt("${ageStats.a1}");
	var age_11 = parseInt("${ageStats.a2}");
	var age_12 = parseInt("${ageStats.a3}");
	var age_20 = parseInt("${ageStats.b1}");
	var age_21 = parseInt("${ageStats.b2}");
	var age_22 = parseInt("${ageStats.b3}");
	var age_30 = parseInt("${ageStats.c1}");
	var age_31 = parseInt("${ageStats.c2}");
	var age_32 = parseInt("${ageStats.c3}");
	var viewcnt_post = parseInt("${viewCnt.post_cnt}");
	var viewcnt_profile = parseInt("${viewCnt.page_cnt}");
	var viewcnt_link = parseInt("${viewCnt.link_cnt}");
	
	var post_index = 0;
	var likeMemberIndex = 0;
   	
   	google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
	function drawChart() {
		var gender_data = google.visualization.arrayToDataTable([
			['성별', '명'],
			['남성', gender_male],
			['여성', gender_female]
		]);
		var gender_options = { ntitle: '성별' };
		var gender_chart = new google.visualization.PieChart(document.getElementById('dashboard-gender-chart'));
		gender_chart.draw(gender_data, gender_options);
		
		var age_data = google.visualization.arrayToDataTable([
   			['연령대', '나이'],
   			['10대초반', age_10],
   			['10대중반', age_11],
   			['10대후반', age_12],
   			['20대초반', age_20],
   			['20대중반', age_21],
   			['20대후반', age_22],
   			['30대초반', age_30],
   			['30대중반', age_31],
   			['30대후반', age_32]
   		]);
   		var age_options = { ntitle: '연령대' };
   		var age_chart = new google.visualization.PieChart(document.getElementById('dashboard-age-chart'));
   		age_chart.draw(age_data, age_options);
   		
   		var viewcnt_data = google.visualization.arrayToDataTable([
			['조회수', '프로필', '포스트', '상품URL'],
			['방문자 수',  viewcnt_profile, viewcnt_post, viewcnt_link],
		]);
   		var viewcnt_chart = new google.visualization.BarChart(document.getElementById('dashboard-viewcnt-chart'));
   		viewcnt_chart.draw(viewcnt_data);
   		$(".loading").hide();
   		if($("#dash-location-chart").children("li").length == 0){
   			$("#dash-location-chart").prev().remove();
   			$("#dash-location-chart").remove();
   			$("#dash-location-empty").show();
   		}
   		
   		if($("#dashboard-viewcnt-chart").find("g").length <= 1){
   			$("#dashboard-viewcnt-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
   		}
   		if($("#dashboard-gender-chart").find("g").length <= 1){
   			$("#dashboard-gender-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
   		}
   		if($("#dashboard-age-chart").find("g").length <= 1){
   			$("#dashboard-age-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
   		}
    }
	
	function sub(el, target){
		$(".subLayout").hide();
		$("#"+target).fadeIn();
		$("#menu").children("li").removeClass("active");
		$(el).addClass("active");
		if(target == "stats"){
			if($("#post-list").is(":empty")){
				getPostList();
			}
			
		}
	}
	
	$("body").tooltip({
	    selector: '[data-toggle="tooltip"]',
	    'placement': 'top',
        'container': 'body',
        'trigger': "hover"
	});
	
	$(function(){
		/* $(".subLayout").sortable({
			handle: ".chart_title"
		}); */
		$(".subLayout").disableSelection();
		
		getPopularityPost(null, "like");
		
		$("#post-search").keyup(function(){
   			var searchValue = $(this).val();
			if(searchValue == ""){
				$("#post-list").children("li").each(function(){
					$(this).show();
				});
			}else{
				$("#post-list").children("li").each(function(){
					if(Hangul.search($(this).children(".post_list_content").html(), searchValue) == -1){
						$(this).hide();
					}else{
						$(this).show();
					}
				});
			}
			
		});
	});
	
	function getPopularityPost(el, type){
		var target;
   		if(type=="like"){
   			target = "#popularity-like-list";
   			$("#popularity-viewcnt-list").parent().hide();
   			$(target).parent().show();
   			if(el != null){
   				$(el).addClass("active").next().removeClass("active");
   			}
   		}else{
   			target = "#popularity-viewcnt-list";
   			$("#popularity-like-list").parent().hide();
   			$(target).parent().show();
   			if(el != null){
   				$(el).addClass("active").prev().removeClass("active");
   			}
   		}
   		var $el = $(target);
   		if($el.is(":empty")){
   			$.ajax({
   	   		    type : "get"
   	   		    , url : "/statistics/getPopularityPost?type="+type
   	   		    , dataType : "json"
   	   		    , timeout : 5000
   	   		    , error : function() {
   	   		    	alert('error');
   	   		    }
   	   		    , success : function(data){
   	   		    	if(data == ""){
   	   		    		$("#none-like-post-message").show();
   	   		    	}else{
   	   		    		var txt = "좋아요";
   	   		    		if(type == "viewcnt") txt = "조회수";
   	   		    		for(var i=0;i< data.length;i++){
   	   		    			$el.append("<li data-toggle='tooltip' title='"+data[i].cnt+"&nbsp;"+txt+"'><a href='/p/"+data[i].url+"' target='_blank'><img class='post_list_image' src='/resources/upload/post/thumbnail/"+data[i].image1+"'><span class='post_list_content'>"+data[i].title+"</span><span class='post_list_time'>"+data[i].createdate+"</span></a></li>");
   	   	   		    	}
   	   		    		$el.slimScroll({
   	   		    			height: '300px',
	   	   		    		railVisible: true,
	   	   		    	    alwaysVisible: true,
							railColor: '#D3D3D3',
							color: '#B2B2B2',
							size: '8px'
   	   	   		    	});
   	   		    	}
   	   		    }
   				, beforeSend: function () {
   					
   				}
   				, complete: function () {
   					
   				}
   	   		});
   		}
	}
	
	function getPostList(){
		$.ajax({
   		    type : "get"
   		    , url : "/statistics/getPostList"
   		    , dataType : "json"
   		    , timeout : 5000
   		    , error : function() {
   		    	alert('error');
   		    }
   		    , success : function(data){
   		    	if(data == ""){
   		    		$("#none-post-message").show();
   		    		$("#post-stats-select").hide();
   		    	}else{
   		    		$("#post-size").html("(총 "+data.length+"개)");
   		    		for(var i=0;i< data.length;i++){
   	   		    		$("#post-list").append("<li onclick='getPostStats(this, "+data[i].idx+")' data-url='"+data[i].url+"'><img class='post_list_image' src='/resources/upload/post/thumbnail/"+data[i].image1+"'><span class='post_list_content'>"+data[i].title+"</span><span class='post_list_time'>"+data[i].createdate+"</span></li>");
   	   		    	}
   		    		$("#post-list").slimScroll({
   	   		    	    railVisible: true,
   	   		    	    alwaysVisible: true,
						railColor: '#D3D3D3',
						color: '#B2B2B2',
						size: '8px'
   	   		    	});
   		    	}
   		    }
			, beforeSend: function () {
				
			}
			, complete: function () {
				
			}
   		});
	}

	function getPostStats(el, idx){
		$.ajax({
   		    type : "get"
   		    , url : "/statistics/getPostStats?idx="+idx
   		    , dataType : "json"
   		    , timeout : 5000
   		    , error : function() {
   		    	
   		    }
   		    , success : function(data) {
   		    	console.log(JSON.stringify(data));
   		    	$("#post-stats-select").hide();
   		    	$("#post-title").attr("href", "/p/"+$(el).data("url")).children("span").html($(el).children(".post_list_content").html());
   		    	$("#post-image").attr("src",$(el).children(".post_list_image").attr("src"));
   		    	$("#post-stats-list").show();
   		    	$("#post-cnt").html(data.stats.post_cnt);
   		    	$("#like-cnt").html(data.stats.like_cnt);
   		    	$("#link-cnt").html(data.stats.link_cnt);
   		    	if(data.stats.like_cnt != 0){
   		    		$("#like-cnt").parent().attr("onclick", "showLikeMember("+idx+")").css("cursor","pointer");
   		    	}else{
   		    		$("#like-cnt").parent().removeAttr("onclick").css("cursor","normal");
   		    	}
   		    	try{
   		    		var gender_data = google.visualization.arrayToDataTable([
               			['성별', '명'],
               			['남성', data.stats.male],
               			['여성', data.stats.female]
               		]);
               		var gender_options = { ntitle: '성별' };
               		var gender_chart = new google.visualization.PieChart(document.getElementById('post-gender-chart'));
               		gender_chart.draw(gender_data, gender_options);
   		    	}catch(e){
   		    		$("#post-gender-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
   		    	}
   		    	
           		try{
           			var age_data = google.visualization.arrayToDataTable([
               			['연령대', '나이'],
               			['10대초반', data.stats.a1],
               			['10대중반', data.stats.a2],
               			['10대후반', data.stats.a3],
               			['20대초반', data.stats.b1],
               			['20대중반', data.stats.b2],
               			['20대후반', data.stats.b3],
               			['30대초반', data.stats.c1],
               			['30대중반', data.stats.c2],
               			['30대후반', data.stats.c3]
               		]);
               		var age_options = { ntitle: '연령대' };
               		var age_chart = new google.visualization.PieChart(document.getElementById('post-age-chart'));
               		age_chart.draw(age_data, age_options);
           		}catch(e){
           			$("#post-age-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
           		}
           		
           		if(data.weekCnt[6].cnt==0 && data.weekCnt[5].cnt==0 && data.weekCnt[4].cnt==0 && data.weekCnt[3].cnt==0 && data.weekCnt[2].cnt==0 && data.weekCnt[1].cnt==0 && data.weekCnt[0].cnt==0){
           			$("#post-weekcnt-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
           		}else{
		   			var weekCnt_data = google.visualization.arrayToDataTable([
       					['date', '조회수'],
       					[data.weekCnt[6].date,  data.weekCnt[6].cnt],
       					[data.weekCnt[5].date,  data.weekCnt[5].cnt],
       					[data.weekCnt[4].date,  data.weekCnt[4].cnt],
       					[data.weekCnt[3].date,  data.weekCnt[3].cnt],
       					[data.weekCnt[2].date,  data.weekCnt[2].cnt],
       					[data.weekCnt[1].date,  data.weekCnt[1].cnt],
       					[data.weekCnt[0].date,  data.weekCnt[0].cnt]
       				]);
       				var weekCnt_options = {
       					legend: 'none'
       				};
       				var weekCnt_chart = new google.visualization.LineChart(document.getElementById('post-weekcnt-chart'));
       				weekCnt_chart.draw(weekCnt_data,weekCnt_options);
           		}
   		    }
			, beforeSend: function () {
				$("#loading-post").show();
			}
			, complete: function () {
				$("#loading-post").hide();
				if($("#post-viewcnt-chart").find("g").length <= 1){
		   			$("#post-viewcnt-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
		   		}
		   		if($("#post-gender-chart").find("g").length <= 1){
		   			$("#post-gender-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
		   		}
		   		if($("#post-age-chart").find("g").length <= 1){
		   			$("#post-age-chart").html("<div style='padding-top:130px;text-align:center;'>데이터가 없습니다</div>");
		   		}
			}
   		});
	}
	
	function showLikeMember(idx){
   		$("#likemember-list").empty();
   		$("#likemember-modal").modal("show");
		$.ajax({
			type : "post"
		    , url : "/getPostLikeMemberList?post_idx="+idx+"&index="+likeMemberIndex+"&loadSize=40"
		    , dataType : "json"
		    , timeout : 5000
		  	, error : function() {
	  			$("#likemember-list").html("<li style='text-align:center;'>불러올 수 없습니다</li>");
		    }
		    , success : function(response) {
		    	var html = "";
		    	for(var i=0;i<response.length;i++){
		    		html += "<li><div><a href='/"+response[i].member_id+"' target='_blank'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div><p><a target='_blank' class='lm-name' href='/"+response[i].member_id+"'>"+response[i].member_name+"</a><br><a target='_blank' class='lm-id' href='/"+response[i].member_id+"'>@"+response[i].member_id+"</a></p>";
		    		if(response[i].followState == "unFollow"){
		    			html += "<button type='button' class='btn btn-default btn-sm' onclick='follow(this, \"follow\", "+response[i].member_idx+")'>팔로우</button></li>";
		    		}else if(response[i].followState == "following"){
		    			html += "<button type='button' class='btn btn-success btn-sm' onclick='follow(this, \"unfollow\", "+response[i].member_idx+")'><i class='fa fa-check'></i>&nbsp;팔로잉</button></li>";
		    		}else{
		    			html += "</li>";
		    		}
		    	}
		    	$("#likemember-list").append(html);
		    }, beforeSend: function() {
		    	$("#likemember-list-loading").show();
		    }, complete : function(){
		    	$("#likemember-list-loading").hide();
		    }
		});
   	}
</script>
</body>
</html>